<template>
	<view>
		<view class="bgFill flex flex-direction align-center">
			<view class="balance">￥{{wallet.balance}}</view>
			<text style="font-size: 24upx;color: #ffc4c6;">可用</text>
			<view style="font-size: 26upx;margin-top: 40upx;">冻结中：{{wallet.freeze}}</view>
		</view>
		<view class="menus flex align-center justify-around">
			<view :class="type == 1?'activeItem':''" @click="type = 1">释放中</view>
			<view :class="type == 2?'activeItem':''" @click="type = 2">已释放</view>
		</view>
		<scroll-view class="listBox" scroll-y :style="{height: scrollheight}" @scrolltolower="lower" :scroll-top="totop">
			<view class="couponItem" :class="type==1?'bg1':'bg2'" v-for="i in list" @click="toDetail(i)">
				<view class="coupontext flex flex-direction justify-center">
					<view style="font-size: 32upx;font-weight: bold;">美试券 {{i.total_num}}</view>
					<text style="font-size: 24upx;margin-top: 20upx;">{{i.create_at}}</text>
				</view>
				<view class="todetail" v-if="type == 1">明细</view>
			</view>
			<view class="hasmore">{{hasmore?'加载中':'没有更多了'}}</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				wallet:'',
				scrollheight:'0px',
				type:1,
				page:1,
				page_size:10,
				list:[],
				totop:0,
				hasmore:true
			};
		},
		onShow() {
			this.page = 1
			this.hasmore = true
			this.list = []
			this.loadData()
			this.loadList()
		},
		onReady(){
			this.getHeight()
		},
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url:'/pages/WB/integralInfo?type=2'
			})
		},
		watch:{
			type(){
				this.totop = 0
				this.page = 1
				this.hasmore = true
				this.list = []
				this.loadList()
			}
		},
		methods: {
			lower(){
				if(this.hasmore){
					this.loadList()
				}
			},
			getHeight() {
				var that = this
				uni.getSystemInfo({
					success(res) {
						var windowHeight = res.windowHeight - 0
						let view2 = uni.createSelectorQuery().in(that).select(".listBox");
						view2.fields({
							size: true,
							scrollOffset: true,
							rect: true
						}, data => {
							that.scrollheight = windowHeight - data.top - 20 + 'px'
							
						}).exec();
					}
				})
			},
			loadList(){
				this.$sloading()
				this.$request({
					url: this.$api.wallet.instance_list,
					data: {
						page:this.page,
						limit:this.page_size,
						type:this.type
					}
				}).then(res => {
					this.$hloading()
					if (res.code == 0) {
						this.page ++
						this.hasmore = res.data.list.length == this.page_size
						this.list = this.list.concat(res.data.list)
					}
				}).catch(res => {
					this.$hloading()
				})
			},
			loadData(id) {
				this.$request({
					url: this.$api.wallet.get_balance,
					data: {
						b_type:2
					}
				}).then(info => {
					if (info.code == 0) {
						this.wallet = info.data
					}
				}).catch(info => {})
			},
			toDetail(i){
				uni.navigateTo({
					url:'/pages/WB/integralDetail?id='+i.id+'&money='+i.total_num+'&time='+i.create_at
				})
			}
		}
	}
</script>

<style scoped>
	.todetail{
		position: absolute;
		top: 40upx;
		text-align: center;
		right: 0;
		/* background: #fff; */
		font-size: 24upx;
		line-height: 40upx;
		border-radius: 20upx 0 0 20upx;
		color:#ff6588;
		width: 120upx;
		padding-left: 60upx;
	}
	.coupontext{
		height: 180upx;
		margin-left:140upx;
		color: #fff;
	}
	.couponItem{
		width: 100%;
		height: 180upx;
		margin-bottom: 20upx;
		position: relative;
	}
	.bg1{
		background-image: url(../../static/image/WB/canInter.png);
		background-size: 100% 100%;
	}
	.bg2{
		background-image: url(../../static/image/WB/noInter.png);
		background-size: 100% 100%;
	}
	.listBox{
		width: 700upx;
		background: #fff;
		padding: 20upx;
		margin: 0 auto;
		border-radius: 20upx;
	}
	.activeItem{
		border-bottom: 2px solid #ff6588;
		color: #ff6588;
	}
	.menus{
		height: 80upx;
		line-height: 50upx;
		font-size: 28upx;
	}
	.balance{
		line-height: 80upx;
		font-size: 36upx;
		font-weight: bold;
		color: #fff;
	}
	.bgFill {
		background-image: url(../../static/image/WB/wBg.png);
		background-size: 100% 100%;
		width: 100%;
		padding-bottom:30upx;
		color: #fff;
	}

	page {
		background: #f5f5f5;
	}
</style>
